@page "/maps/selection"

@using Syncfusion.Blazor.Maps

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample visualizes USA president election results in the year 2016. Placed interactive legend at the top of the map.</p>
</SampleDescription>
<ActionDescription>
   <p>In this example, you can see how to apply various styles for a shape in the map, when it is clicked or mouse hovered.</p>
   <p>More information about selection and highlight can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/maps/user-interactions/#shape-selection'>documentation section</a>. Selection is enabled by <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayerSelectionSettings.html'>MapsLayerSelectionSettings</a></code> property and highlight is enabled by <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayerHighlightSettings.html'>MapsLayerHighlightSettings</a></code> Property </p>
</ActionDescription>

<div class="control-section">
    <SfMaps>
        <MapsTitleSettings Text="USA Election Results - 2016">
            <MapsTitleTextStyle Size="16px" />
        </MapsTitleSettings>
        <MapsLegendSettings Visible="true" Mode="LegendMode.Interactive" Position="LegendPosition.Top" Width="80%">
            <MapsLegendTextStyle FontWeight="400" Size="16px" />
        </MapsLegendSettings>
        <MapsZoomSettings Enable="false" />
        <MapsLayers>
            <MapsLayer ShapeData='new {dataOptions ="data/maps/usa.json"}' ShapeDataPath="State" ShapePropertyPath="@ShapePropertyPath" DataSource="@SelectionDataSource" TValue="SelectionData">
                <MapsLayerTooltipSettings Visible="true" ValuePath="State" />
                <MapsLayerHighlightSettings Enable="true" Fill="#A3B0D0" />
                <MapsLayerSelectionSettings Enable="true" Fill="#4C515B" Opacity="1" />
                <MapsShapeSettings ColorValuePath="Candidate">
                    <MapsShapeColorMappings>
                        <MapsShapeColorMapping Value="Trump" Color="@TrumpColor" />
                        <MapsShapeColorMapping Value="Clinton" Color="@ClintonColor" />
                    </MapsShapeColorMappings>
                </MapsShapeSettings>
            </MapsLayer>
        </MapsLayers>
    </SfMaps>
    <div class="urllink">
        Source:
        <a href="https://en.wikipedia.org/wiki/United_States_presidential_election,_2016" target="_blank">en.wikipedia.org</a>
    </div>
</div>

@code {
    public string[] ShapePropertyPath = { "name" };
    public string[] TrumpColor = { "#D84444" };
    public string[] ClintonColor = { "#316DB5" };
    public class SelectionData
    {
        public double Value { get; set; }
        public string State { get; set; }
        public string Candidate { get; set; }
        public double Trump { get; set; }
        public double Clinton { get; set; }
    };
    public List<SelectionData> SelectionDataSource = new List<SelectionData> {
        new SelectionData { Value=5, State="Alabama", Candidate="Trump", Trump=62.9, Clinton=34.6 },
        new SelectionData { Value=5, State="Alaska", Candidate="Trump", Trump=52.9, Clinton=37.7 },
        new SelectionData { Value=5, State="Arkansas", Candidate="Trump", Trump=60.6, Clinton=33.7 },
        new SelectionData { Value=5, State="Arizona", Candidate="Trump", Trump=49.5, Clinton=45.4 },
        new SelectionData { Value=1, State="California", Candidate="Clinton", Trump=32.8, Clinton=61.6 },
        new SelectionData { Value=1, State="Colorado", Candidate="Clinton", Trump=47.3, Clinton=44.4 },
        new SelectionData { Value=1, State="Connecticut", Candidate="Clinton", Trump=41.2, Clinton=54.5 },
        new SelectionData { Value=1, State="Delaware", Candidate="Clinton", Trump=53.4, Clinton=41.9 },
        new SelectionData { Value=1, State="District of Columbia", Candidate="Clinton", Trump=4.1, Clinton=92.8 },
        new SelectionData { Value=5, State="Florida", Candidate="Trump", Trump=49.1, Clinton=47.8 },
        new SelectionData { Value=5, State="Georgia", Candidate="Trump", Trump=51.3, Clinton=45.6 },
        new SelectionData { Value=1, State="Hawaii", Candidate="Clinton", Trump=62.2, Clinton=30 },
        new SelectionData { Value=5, State="Idaho", Candidate="Trump", Trump=59.2, Clinton=27.6 },
        new SelectionData { Value=1, State="Illinois", Candidate="Clinton", Trump=55.4, Clinton=39.4 },
        new SelectionData { Value=5, State="Indiana", Candidate="Trump", Trump=57.2, Clinton=37.9 },
        new SelectionData { Value=5, State="Iowa", Candidate="Trump", Trump=51.8, Clinton=42.2 },
        new SelectionData { Value=5, State="Kansas", Candidate="Trump", Trump=57.2, Clinton=36.2 },
        new SelectionData { Value=5, State="Kentucky", Candidate="Trump", Trump=62.5, Clinton=32.7 },
        new SelectionData { Value=5, State="Louisiana", Candidate="Trump", Trump=58.1, Clinton=38.4 },
        new SelectionData { Value=1, State="Maine", Candidate="Clinton", Trump=45.2, Clinton=47.9 },
        new SelectionData { Value=1, State="Maryland", Candidate="Clinton", Trump=35.3, Clinton=60.5 },
        new SelectionData { Value=1, State="Massachusetts", Candidate="Clinton", Trump=33.5, Clinton=60.8 },
        new SelectionData { Value=5, State="Michigan", Candidate="Trump", Trump=47.6, Clinton=47.3 },
        new SelectionData { Value=1, State="Minnesota", Candidate="Clinton", Trump=45.4, Clinton=46.9 },
        new SelectionData { Value=5, State="Mississippi", Candidate="Trump", Trump=58.3, Clinton=39.7 },
        new SelectionData { Value=5, State="Missouri", Candidate="Trump", Trump=57.1, Clinton=38.0 },
        new SelectionData { Value=5, State="Montana", Candidate="Trump", Trump=56.5, Clinton=36.0 },
        new SelectionData { Value=5, State="Nebraska", Candidate="Trump", Trump=60.3, Clinton=34.0 },
        new SelectionData { Value=1, State="Nevada", Candidate="Clinton", Trump=45.5, Clinton=47.9 },
        new SelectionData { Value=1, State="New Hampshire", Candidate="Clinton", Trump=47.2, Clinton=47.6 },
        new SelectionData { Value=1, State="New Jersey", Candidate="Clinton", Trump=41.8, Clinton=55.0 },
        new SelectionData { Value=1, State="New Mexico", Candidate="Clinton", Trump=40.0, Clinton=48.3 },
        new SelectionData { Value=1, State="New York", Candidate="Clinton", Trump=37.5, Clinton=58.8 },
        new SelectionData { Value=5, State="North Carolina", Candidate="Trump", Trump=50.5, Clinton=46.7 },
        new SelectionData { Value=5, State="North Dakota", Candidate="Trump", Trump=64.1, Clinton=27.8 },
        new SelectionData { Value=5, State="Ohio", Candidate="Trump", Trump=52.1, Clinton=43.5 },
        new SelectionData { Value=5, State="Oklahoma", Candidate="Trump", Trump=65.3, Clinton=28.9 },
        new SelectionData { Value=1, State="Oregon", Candidate="Clinton", Trump=41.1, Clinton=51.7 },
        new SelectionData { Value=5, State="Pennsylvania", Candidate="Trump", Trump=48.8, Clinton=47.6 },
        new SelectionData { Value=1, State="Rhode Island", Candidate="Clinton", Trump=39.8, Clinton=55.4 },
        new SelectionData { Value=5, State="South Carolina", Candidate="Trump", Trump=54.9, Clinton=40.8 },
        new SelectionData { Value=5, State="South Dakota", Candidate="Trump", Trump=61.5, Clinton=31.7 },
        new SelectionData { Value=5, State="Tennessee", Candidate="Trump", Trump=61.1, Clinton=34.9 },
        new SelectionData { Value=5, State="Texas", Candidate="Trump", Trump=52.6, Clinton=43.4 },
        new SelectionData { Value=5, State="Utah", Candidate="Trump", Trump=45.9, Clinton=27.8 },
        new SelectionData { Value=1, State="Vermont", Candidate="Clinton", Trump=39.7, Clinton=61.1 },
        new SelectionData { Value=1, State="Virginia", Candidate="Clinton", Trump=45.0, Clinton=49.9 },
        new SelectionData { Value=1, State="Washington", Candidate="Clinton", Trump=4.1, Clinton=92.8 },
        new SelectionData { Value=5, State="Wisconsin", Candidate="Trump", Trump=68.7, Clinton=26.5 },
        new SelectionData { Value=5, State="West Virginia", Candidate="Trump", Trump=47.9, Clinton=46.9 },
        new SelectionData { Value=5, State="Wyoming", Candidate="Trump", Trump=70.1, Clinton=22.5 }
    };
}